<!DOCTYPE html>
<html>
<head>
    <title>Charge Distribution Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="650" height="350"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '20px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Coordinates and dimensions
        const cy = 150;
        const rA = 75;
        const rB = 50;
        const d = 250;
        const x = 120;

        const cxA = 100 + x; // 220
        const cxB = cxA + d; // 470
        const px = 100;

        // --- Drawing Functions ---

        function drawSphere(x, y, radius, label, chargeLabel) {
            // Draw circle
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, 2 * Math.PI);
            ctx.stroke();
            
            // Draw inner label
            ctx.fillText(label, x, y + radius * 0.4);
            
            // Draw charge label
            ctx.fillText(chargeLabel, x, y - radius - 20);
        }
        
        function drawDashedLine(x1, y1, x2, y2, dashArray) {
            ctx.beginPath();
            ctx.setLineDash(dashArray);
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();
            ctx.setLineDash([]); // Reset to solid line
        }
        
        function drawPointOnLine(x, y, radius) {
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, 2 * Math.PI);
            ctx.fillStyle = 'white';
            ctx.fill();
            ctx.strokeStyle = 'black';
            ctx.stroke();
            ctx.fillStyle = 'black';
        }

        function drawDimLine(x1, x2, y, label) {
            const tickHeight = 10;
            const arrowLength = 8;
            const arrowWidth = 4;

            ctx.beginPath();
            
            // Main horizontal line
            ctx.moveTo(x1, y);
            ctx.lineTo(x2, y);
            
            // Ticks at ends
            ctx.moveTo(x1, y - tickHeight / 2);
            ctx.lineTo(x1, y + tickHeight / 2);
            ctx.moveTo(x2, y - tickHeight / 2);
            ctx.lineTo(x2, y + tickHeight / 2);
            
            // Arrowheads pointing inwards
            ctx.moveTo(x1 + arrowLength, y - arrowWidth);
            ctx.lineTo(x1, y);
            ctx.lineTo(x1 + arrowLength, y + arrowWidth);

            ctx.moveTo(x2 - arrowLength, y - arrowWidth);
            ctx.lineTo(x2, y);
            ctx.lineTo(x2 - arrowLength, y + arrowWidth);
            
            ctx.stroke();
            
            // Label
            ctx.fillText(label, (x1 + x2) / 2, y - 18);
        }

        // --- Main Drawing ---

        // Draw Spheres
        drawSphere(cxA, cy, rA, 'A', '4Q');
        drawSphere(cxB, cy, rB, 'B', 'Q');

        // Draw central dashed line MN
        const lineStart = 50;
        const lineEnd = cxB + rB + 50; // 570
        drawDashedLine(lineStart, cy, lineEnd, cy, [8, 5]);

        // Draw M and N labels
        ctx.fillText('M', lineStart - 20, cy);
        ctx.fillText('N', lineEnd + 20, cy);

        // Draw P point
        ctx.fillText('P', px, cy - 30);
        ctx.beginPath();
        ctx.moveTo(px, cy - 20);
        ctx.lineTo(px, cy);
        ctx.moveTo(px, cy - 2); // To draw the perpendicular symbol
        ctx.lineTo(px - 5, cy - 2);
        ctx.stroke();

        // Draw small open circles (holes/points of interest)
        const pointRadius = 3.5;
        drawPointOnLine(px, cy, pointRadius);
        drawPointOnLine(cxA - rA, cy, pointRadius);
        drawPointOnLine(cxA, cy, pointRadius);
        drawPointOnLine(cxA + rA, cy, pointRadius);
        drawPointOnLine(cxB - rB, cy, pointRadius);
        drawPointOnLine(cxB, cy, pointRadius);
        drawPointOnLine(cxB + rB, cy, pointRadius);
        
        // Draw distance markers
        ctx.font = 'italic 18px Arial';
        drawDimLine(px, cxA, cy + 100, 'x');
        drawDimLine(cxA, cxB, cy + 125, 'd');

        // Draw caption
        ctx.font = '20px "SimSun", "Songti SC", serif';
        ctx.fillText('电图 1.19.1', canvas.width / 2, canvas.height - 25);

    </script>
</body>
</html>